<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="视频名称" prop="videoName">
            <el-input v-model.trim="filterForm.videoName" placeholder="请输入视频名称"></el-input>
          </el-form-item>
          <el-form-item label="审核状态" prop="auditSts">
            <el-select v-model.trim="filterForm.auditSts" placeholder="请选择审核状态">
              <el-option v-for="dict in dict.type.auditStatus" :key="dict.value"
                         :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频分类" prop="menuId">
            <el-select v-model.trim="filterForm.menuId" placeholder="请选择视频分类">
              <el-option v-for="type in typeList" :key="type.id" :label="type.menuName"
                         :value="type.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1"></div>
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        class="account-table"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
      >
        <template #videoSlot="{param}">
          <!-- <video :src="param.videoUrl" width="180" controls
                 controlslist="nodownload"></video> -->
          <div class="img-box" :style="{backgroundImage: `url(${param.cover})`}">
            <i class="el-icon-video-play"></i>
          </div>
        </template>
      </dt-table>
    </div>
    <myDtDetail ref="dtDetailRef" :dt-detail-option="detailOption"/>
    <reviewModel ref="reviewModelRef" @success="getList" />
  </div>
</template>

<script>
import myDtDetail from '@/views/unifiedPayment/components/dt-detail'
import reviewModel from './reviewModel'
import { getAuditPage, getDetail, getMenuListByType } from '@/api/classroom/videoReview'
import { cloud } from '@/framework/utils/request'

export default {
  name: 'VideoReview',
  components: { myDtDetail, reviewModel },
  dicts: ['auditStatus'],
  data() {
    return {
      total: 0,
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        videoName: '',
        auditSts: '',
        menuId: ''
      },
      tableOpts: {
        rowKey: 'id',
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        toolbarBtn: [],
        tableCol: [
          {
            prop: 'videoUrl',
            label: '视频',
            show: true,
            slotName: 'videoSlot',
            type: 'image',
            width: 240
          },
          {
            prop: 'videoName',
            label: '视频名称',
            show: true
          },
          {
            prop: 'menuId',
            label: '视频分类',
            show: true,
            formatter: (row) => {
              const id = row.menuId
              const menu = this.menuList.find((menu) => menu.value == id)
              return menu && menu.label
            }
          },
          {
            prop: 'createUserName',
            label: '上传人',
            show: true
          },
          {
            prop: 'auditSts',
            label: '审核状态',
            show: true,
            type: 'dict',
            formatter: (row) => { return this.dict.type.auditStatus }
          }
        ],
        operator: {
          width: 200,
          operatorBtn: [
            {
              text: '详情',
              size: 'small',
              click: (row, col, cellValue) => { return this.viewInfo(row) }
            },
            {
              text: '审核',
              permission: ['VIDEO_REVIEW_REVIEW_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.toExamine(row) }
              // disabledChange: (row) => row.auditSts !== 'U'
            }
          ]
        }
      },
      loading: false,
      typeList: []
    }
  },
  computed: {
    menuList() {
      return this.typeList.map((item) => {
        return {
          label: item.menuName,
          value: item.id
        }
      })
    },
    detailOption() {
      return {
        labelWidth: '140px',
        width: '800px',
        column: 1,
        rows: [
          {
            prop: 'videoName',
            label: '视频名称',
            show: true
          },
          {
            prop: 'menuId',
            label: '视频分类',
            show: true
          },
          {
            prop: 'createUserName',
            label: '上传人',
            show: true
          },
          {
            prop: 'auditStsStr',
            label: '审核状态',
            show: true
          },
          {
            prop: 'auditInfo',
            label: '审核建议',
            show: true
          }
          // {
          //   prop: 'videoUrl',
          //   label: '视频',
          //   show: true,
          //   type: 'video'
          // }
        ],
        data: {}
      }
    }
  },
  mounted() {
    this.refresh()
    getMenuListByType().then((res) => {
      this.typeList = res.data
    })
  },
  methods: {
    refresh() {
      this.getList()
    },
    viewInfo(row) {
      getDetail(row.id).then((res) => {
        const { data } = res
        data.auditStsStr = this.dict.type.auditStatus.find((item) => item.value === data.auditSts).label
        data.cover = `${location.origin}${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/public/preview?fileId=${data.coverId}`
        data.videoUrl = `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/publicDownload?fileId=${data.fileId}`
        this.detailOption.data = res.data
        this.$refs.dtDetailRef.dialogVisible = true
      })
    },
    toExamine(row) {
      this.$refs.reviewModelRef.open(row)
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    getList() {
      this.loading = true
      getAuditPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows.map((item) => {
          item.cover = `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/public/preview?fileId=${item.coverId}`
          item.videoUrl = `${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/publicDownload?fileId=${item.fileId}`
          return item
        })
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-box {
  display: inline-block;
  position: relative;
  width: 160px;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%);
    color: #fff;
    font-size: 28px;
  }
}
</style>
